<template>
	<view class="viewport personal-profile">
		<view class="header">
			<view class="header__portrait">
				<button class="iflex aic choose-avatar" plain open-type="chooseAvatar"
					@chooseavatar="tapOnChooseavatar">
					<view class="header__portrait__image">
						<image :src="formData.avatar"></image>
					</view>
					<image class="header__portrait__camera" src="/static/image/mine/camera.png"></image>
				</button>
			</view>
		</view>

		<InfoBlock>
			<InfoBlockItem arrow @clickContent="tapEdit('nickname')">
				<template #label>昵称</template>
				{{formData.nickname}}
			</InfoBlockItem>

			<InfoBlockItem>
				<template #label>性别</template>
				<u-radio-group v-model="formData.sex">
					<u-radio name="F" active-color="#FF710A">女生</u-radio>
					<u-radio name="M" active-color="#FF710A" gap>男生</u-radio>
				</u-radio-group>
			</InfoBlockItem>

			<InfoBlockItem>
				<template #label>手机号</template>
				{{formData.phoneNumber}}
			</InfoBlockItem>
		</InfoBlock>


		<view class="footer safe-area-inset-bottom">
			<u-button style="width:100%;" type="primary" size="large" :fill="true" @click="tapSubmit">保存</u-button>
		</view>

		<u-popup mode="bottom" border-radius="24" :safe-area-inset-bottom="true" v-model="visible">
			<view class="popup-box">
				<view class="popup-box__header">
					<text class="popup-box__header__cancel" @click="visible = !visible">取消</text>
					<text class="popup-box__header__title">修改昵称</text>
					<text class="popup-box__header__button" @click="tapEdit('nickname',true)">确定</text>
				</view>
				<view class="popup-box__body">
					<u-input v-model="editFormData.nickname" :custom-style="customStyleInput"></u-input>
				</view>
			</view>
		</u-popup>
	</view>
	<LoginPopup @success="loadData"></LoginPopup>
</template>

<script lang="ts" setup>
	import InfoBlock from '@/components/info-block/info-block.vue';
	import InfoBlockItem from '@/components/info-block/info-block-item.vue';
	import { uploadFile } from '@/apis/common';
	import { ref } from 'vue';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { getAccountInfo, updateUserAccount } from '@/apis/auth';
	import { isResultSuccess } from '@/utils/http';
	const customStyleInput = ref({
		with: '100%',
		padding: "0 20rpx",
		backgroundColor: '#F6F6F6',
		borderRadius: '12rpx',
	})
	const formData = ref({
		avatar: '',
		nickname: '',
		sex: '', // M =男，F=女，O=未知
		phoneNumber: ''
	})
	const visible = ref(false);
	const editFormData = ref({
		nickname: ''
	})


	function tapEdit(field : string, confirm ?: boolean) {
		switch (field) {
			case 'nickname':
				if (confirm) {
					formData.value.nickname = editFormData.value.nickname
					visible.value = false;
				} else {
					editFormData.value.nickname = formData.value.nickname;
					visible.value = true;
				}
				break;
		}

	}

	function tapOnChooseavatar(e : any) {
		console.log(e);
		uploadFile(e.detail.avatarUrl).then((result : any) => {
			formData.value.avatar = result.data.url;
		});
	}


	function loadData() {
		getAccountInfo().then((res) => {
			if (res.code !== 200) return;
			const detail = res.data;
			formData.value.avatar = detail.avatar;
			formData.value.nickname = detail.nickname;
			formData.value.sex = detail.sex;
			formData.value.phoneNumber = detail.phoneNumber;
		});
	}

	function tapSubmit() {
		updateUserAccount({ ...formData.value }).then((res) => {
			if (!isResultSuccess(res, '保存成功')) return;
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		});
	}


	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});
	onLoad(() => {
		loadData();
	});
</script>

<style lang="scss">
	.personal-profile {
		background-color: #F6F6F6;

		.header {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 322rpx;

			&__portrait {
				position: relative;
				display: inline-flex;
				flex-shrink: 0;
				width: 160rpx;
				height: 160rpx;

				.choose-avatar {
					border: none !important;
					padding: 0 !important;
				}

				&__image {
					display: inline-flex;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					border: 3rpx solid white;
					box-sizing: border-box;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				&__camera {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 0;
					display: inline-flex;
					flex-shrink: 0;
					width: 49rpx;
					height: 49rpx;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding-top: 32rpx;
			padding-right: 32rpx;
			padding-left: 32rpx;
			box-sizing: border-box;
			background-color: white;

			button {
				margin-bottom: 32rpx;
			}
		}


		.popup-box {
			display: flex;
			flex: 1 0;
			flex-direction: column;
			padding-bottom: 40rpx;
			box-sizing: border-box;

			&__header {
				display: inline-flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				flex-shrink: 0;
				padding: 40rpx 32rpx;
				box-sizing: border-box;

				&__cancel {
					font-weight: 400;
					font-size: 32rpx;
					color: #909090;
				}

				&__title {
					font-weight: 400;
					font-size: 36rpx;
					color: #000000;
				}

				&__button {
					font-weight: 500;
					font-size: 32rpx;
					color: #2C2C2C;
				}

			}

			&__body {
				display: inline-flex;
				flex-direction: column;
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
			}
		}
	}
</style>